<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>简单图片轮播</title>
    
    <style>
        body {
            background-color: #ccc;
        }

        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        ol li {
            list-style: none;
        }

        .img-slider {
            width: 500px;
            height: 200px;
            background-color:#FFFFAA;
            margin: 20px auto;
            overflow: hidden;
            position: relative;
        }

        .img-slider ul li {
            width: 500px;
            height: 200px;
            float: left;
        }

        .img-slider a {
            position: absolute;
            top: 50%;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: #333;
            margin-top: -25px;
            opacity: 0.5;
            filter: alpha(opacity=50); /* ie上的透明度 */
            display: none;
        }

        .img-slider a.next {
            left: auto;
            right: 0;
        }

        .img-slider:hover a {
            display: block;
        }

        .img-slider ol {
            width: 96px;
            height: 10px;
            background-color: red;
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -48px;
            padding: 2px 1px;
            border-radius: 7px;
        }

        .img-slider ol li {
            width: 10px;
            height: 10px;
            background-color: #ccc;
            float: left;
            margin: 0 3px;
            border-radius: 5px;
        }

        .img-slider ol li.active {
            background-color: green;
        }
    </style>
</head>
<body>

    <div class="img-slider">
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>
        <a href="javascript:;" class="prev"></a>
        <a href="javascript:;" class="next"></a>
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    
    <script src="../biaodan exercise/jquery-1.12.0.js"></script>
    <script>
        $(document).ready(function() {
            var $slider = $('.img-slider'),/*找到最大的div*/
                $ul = $('.img-slider > ul'), // $slider.find('ul')
                $ol = $('.img-slider > ol'), // $slider.find('ol')
                len = $ul.find('li').length, /*li的长度*/
                width = $ul.find('li').width(), /*li的宽度*/
                ulWidth = len * width, /*ul的宽度*/
                timer;

            $ul.width(ulWidth);

            // for

            // 2
            // $slider.find('a')
            $('.img-slider > a').on('click', function() {
                var $this = $(this),
                    currIndex = $ol.find('li.active').index();//(被选中的li的缩影值）

                if ( $('ul:animated').length > 0 ) {
                    return;
                }

                if ($this.hasClass('next')) {
                    currIndex++;
                    currIndex = (currIndex == len) ? 0 : currIndex;
                    // (currIndex == len) && (currIndex = 0);
                    /*if (currIndex == len) {
                        currIndex = 0;
                    }*/
                } else {
                    currIndex--;
                    if (currIndex < 0) {
                        currIndex = len - 1;
                    }
                }
                $ol.find('li').eq(currIndex).trigger('click');
                /*给li绑了一个点击事件*/
                // console.log(currIndex)
            });

            // 1
            $ol.find('li').on('click', function() {
                var $this = $(this),
                    index = $this.index();

                // $this.addClass('active').siblings('.active').removeClass('active'); 这个是只要点击点就会出现

                $ul.animate({marginLeft: -width * index}, 100, function() {
                   /* 200毫秒的时间移动整张图片的宽度*/
                  /* *索引是几就跳几张li的宽度*/
                    // console.log($this);
                    $this.addClass('active').siblings('.active').removeClass('active');
                    /*让ol下的li动画执行完（被点后）加上一个样式*/
                });
            });

            // 4
            $slider
                .on('mouseover', function() {
                    clearInterval(timer);  /*鼠标进来清除定时器*/
                })
                .on('mouseout', function() {
                    runner();  /*鼠标出去开启定时*/
                })

            // // 3
            function runner() {
                timer = setInterval(function() {
                    /*$slider.find('a.prev').trigger('click');*/  /*反转*/
                    $('.img-slider > a.next').trigger('click'); /*正转*/
                }, 2000);
            }

            runner();

        });


    </script>
</body>
</html>